<template>
  <!-- 展示屏 -->
  <div class="editor-content">
    <div class="screen">
      <div class="company_title">
          <!--引用组件 减小展示屏代码体积 -->
          <CompanyTitle :numdata="'6666666'"></CompanyTitle>
          <router-link to="/editor">自定义设置</router-link>
      </div>
      <div class="company_info">
          <CompanyInfo></CompanyInfo>
      </div>
      <component v-for="(item,index) in componentData" :key="index" :is="item.component.componentName" :boxPosition="item.position" :style="'width:'+item.size.width+'px;height:'+item.size.height+'px;'"></component>
    </div>
  </div>
</template>

<script lang="ts">
// 引入所需工具
import {defineComponent,onMounted, ref} from 'vue'
import { useStore } from 'vuex';
//引入通过code获取对应组件名的函数
import {codeCorresponding, codeName} from '../../assets/components/presetComponents' 

// 引入图表组件
import BarChart from '../charts-show/BarChart.vue'
import BreadChart from '../charts-show/BreadChart.vue'
// import BrokenLineChart from '../charts-show/brokenLine/BrokenLineChart.vue'
import CourseRankingList from '../charts-show/CourseRankingList.vue'
import ChinaMapChart from '../charts-show/ChinaMapChart.vue'
import CurveLineChart from '../charts-show/CurveLineChart.vue'
import StudyDynamic from '../charts-show/StudyDynamic.vue'
import LearntimeRanking from '../charts-show/LearntimeRanking.vue'
import ScoreRanking from '../charts-show/ScoreRanking.vue'
import TestDynamic from '../charts-show/TestDynamic.vue'
import FoldBarChart from '../charts-show/FoldBarChart.vue'

// 引入nva组件
import CompanyInfo from '../company-nva/company-info.vue'
import CompanyTitle from '../company-nva/company-title.vue'

// 引入接口
import { AxiosActiveUser } from '@/api'

export default defineComponent({
    name: 'Show',
    components:{
      // 需要的echarts组件
      BarChart,
      BreadChart,
      CourseRankingList,
      ChinaMapChart,
      CurveLineChart,
      StudyDynamic,
      TestDynamic,
      FoldBarChart,
      LearntimeRanking,
      ScoreRanking,
      // nva组件
      CompanyInfo,
      CompanyTitle,
    },
    setup(){
      const store = useStore()
      const componentData = ref([])
      const getData = ()=>{
        let echartsD = JSON.parse(sessionStorage.getItem('echartsData'))
        console.log(echartsD) 
        if (echartsD) {
              echartsD.forEach(item=>{
                let list = {
                  component:{
                      code: item.code,
                      componentName: codeCorresponding[item.code],
                      name: codeName[item.code],
                    },
                    position: {
                      left: Number(item.style.left), 
                      top: Number(item.style.top)
                    },
                    size: {
                      width: Number(item.style.width), 
                      height: Number(item.style.height)
                    }
                  }
                  componentData.value.push(list)
              })
              
              store.state.components = componentData.value
        }

        // AxiosActiveUser.getData().then(response=>{
        //   console.log(response.data.data);
        //       response.data.data.forEach(item=>{
        //         let list = {
        //           component:{
        //               code: item.code,
        //               componentName: codeCorresponding[item.code],
        //               name: codeName[item.code],
        //             },
        //             position: {
        //               left: Number(item.left), 
        //               top: Number(item.top)
        //             },
        //             size: {
        //               width: Number(item.width), 
        //               height: Number(item.height)
        //             }
        //           }
        //           componentData.value.push(list)
        //       })
        //       store.state.components = componentData.value
        //   })
      }
      getData()
      console.log(store.state.components);
      console.log(componentData.value);
      
      const data = [
        // {component:'CurveLineChart',width:'520px',height:'270px'},
        // {component:'BarChart',width:'520px',height:'270px'},
        // {component:'BreadChart',width:'250px',height:'270px'},
        // {component:'CourseRankingList',width:'250px',height:'270px'},
        // {component:'LearntimeRanking',boxPosition:'right: 50px;top: 300px;',width:'520px',height:'190px'},
        // {component:'ChinaMapChart',width:'740px',height:'660px'},
        // {component:'FoldBarChart',width:'520px',height:'190px'},
        // {component:'ScoreRanking',boxPosition:'right: 50px;top: 510px;',width:'520px',height:'190px'},
        // {component:'StudyDynamic',boxPosition:'right: 320px;top: 720px;',width:'250px',height:'270px'},
        // {component:'TestDynamic',boxPosition:'right: 50px;top: 720px;',width:'250px',height:'270px'},
      ]
      

      
      return{
        store,
        componentData
      }
    }
});
</script>

<style lang="scss" scoped>
.editor-content{
  width: 1920px;
  height: 1080px;
  position: relative;
}
.screen{
  width: 100%;
  height: 100%;
  background: url('../../assets/images/useimages/bg.png') no-repeat center top;
  background-size: cover;
}
.editor-content a{
    display: inline-block;
    position: absolute;
    top: 17px;
    right: 20px;
    width: 100px;
    height: 36px;
    color: white;
    font-size: 12px;
    text-align: center;
    line-height: 36px;
    border-radius: 20px;
    text-decoration: none;
    background-color: #68b6ff;
    z-index: 99;
}
.company_title{
  font-family: '思源黑体';
  height: 100px;
  background: url('../../assets/images/useimages/nva-bg.png') no-repeat center;
  position: relative;
}

.company_info{
  width: 800px;
  height: 170px;
  position: absolute;
  left: 50%;
  margin-left: -400px;
  text-align: center;
}

</style>